{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}{% endblock %}
{% block external %}
	<script type="text/javascript">
		$(function () {
			window.app = MapController.init({ dishes : {{ dishes_json|safe }} });
				
			//$( "#my-ranking-list" ).sortable({
				//items: "li:not(.placeholder)",
				//placeholder: "ui-state-highlight",
				// sort: function() {
					// gets added unintentionally by droppable interacting with sortable
					// using connectwithsortable fixes this, but doesn't allow you to customize active/hoverclass options
					//$( this ).removeclass( "ui-state-default" );
				// }
			//});
		});
	</script>
{% endblock %}

{% block content %}

<div id="rank-list" class="clearfix list">
	<ol>
		<li class="heading">{{ tag|capfirst }}</li>
		<li class="first"></li>
		{% for dish in dishes %}
		<li>
			<span class="ol-number">{{ forloop.counter }}</span>
			<div class="dish-info clearfix">
			<span class="dish-name-text"><a href="/d/{{ dish.slug }}">{{ dish.name }}<br /></a></span>
			<span class="place-name-text">(<a href="/p/{{ dish.place.slug }}">{{ dish.place.name }}</a>)</span>
			<div class="css-page-corner"></div>
			</div>
		</li>
		{% endfor %}
		<li class="last"></li>
	</ol>
</div>

<span id="map-container" class="clearfix list">
<div id="map_canvas"></div>
</span>
{% endblock %}